/*
 * @Description: 
 * @Version: 2.0
 * @Autor: liuwei
 * @Date: 2021-04-27 12:55:40
 * @LastEditors: liuwei
 * @LastEditTime: 2021-06-04 19:37:15
 */
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const path = require('path')

module.exports = {
  // 打包入口
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    // 打包输出路径
    path: path.join(__dirname, './dist'),
    // 打包输出名称
    filename: '[name].[hash:8].js'
  },
  resolve: {
    // 用于配置在匹配过程中的后缀先后循序
    extensions: ['.js', '.vue', '.json'],
    // 创建别名以更轻松地导入或需要某些模块。 例如，给一堆常用的 src/ 文件夹取别名
    alias: {
      'assets': path.join(__dirname, 'src/assets'),
      'public': path.join(__dirname, 'public'),
      'components': path.join(__dirname, 'src/components'),
    }
  },
  module: {
    rules: [
      {
        test: /\.less$/,
        include: path.resolve(__dirname), 
        // style-loader: 把js对象转换成样式节点
        // css-loader: 把css转换成js对象
        // less-loader: 把less转换成css
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: {
          loader: 'file-loader',
          options: {
            esModule: false,
            outputPath: 'assets',
            name: '[name].[ext]'
          }
        }
      },
      {
        test: /\.vue$/,
        use: [
          'vue-loader',
        ]
      },
      {
        test: /\.(js|vue)$/,
        use: 'eslint-loader',
        enforce: 'pre'
      }
    ]
  },

  plugins: [
    // html生成插件
    new HtmlWebpackPlugin({
      title: 'webpack-demo',
      // 在html中加入meta头
      meta: {
        viewport: 'width=device-width'
      },
      // 生成HTML的模板
      template: './public/index.html',
      // 生成HTML时定义的变量
      templateParameters: {
        'BASE_URL': './'
      }
    }),
    // new webpack.HotModuleReplacementPlugin(),
    // 处理vue文件必须要用的插件
    new VueLoaderPlugin(),
    // 每次编译时都要把上次打包结果删除
    new CleanWebpackPlugin(),
    // 注册全局变量
    // new webpack.DefinePlugin({
    //   'BASE_URL': JSON.stringify('./public/')
    // })
  ]
}